<template>
    <div class="text-black text-black overflow-hidden flex flex-row justify-stretch">
        <div class="flex-1 mr-2 p-4 bg-white rounded-md shadow-lg overflow-hidden">
            <div class="text-lg">
                正则表达式在线测试工具
                <span class="text-sm pl-2 text-black/[0.6]">让你的正则更懂你</span>
            </div>
            
            <el-input
                v-model="form.input3"
                :autosize="{ minRows: 6,maxRows: 10 }"
                class="mt-4"
                clearable
                resize="none"
                type="textarea"
                placeholder="在此输入待匹配文本"
            />

            <el-input
            v-model="form.input3"
            placeholder="再此输入正则表达式"
            class="w-full mt-4 custom_input_group"
            size="large"
            >
            <template #prepend>/</template>
            <template #append>
                <el-select multiple collapse-tags collapse-tags-tooltip v-model="form.input3" class="custom_select" placeholder="">
                    <el-option v-for="(item,index) in regGlobalOptions" :key="index" :label="item.name" :value="item.short" />
                    <template #tag>
                        <div class="flex flex-row pr-10" title="修饰符">
                            <span>/</span>
                            <el-tag v-for="itemtag in form.input3">{{itemtag}}</el-tag>
                        </div>
                    </template>
                </el-select>
            </template>
            </el-input>
            <div class="mt-4">
                匹配结果
            </div>

        </div>
        <div class="w-1/4 border rounded-md shadow-lg bg-white overflow-hidden text-left">
            <div class="bg-white p-4 pb-0 text-md font-semibold lg:pr-3">
            <!-- :contenteditable="true" -->
                常用表达式
            </div>
            <div class="flex flex-col items-start p-4">
                <n-collapse arrow-placement="right">
                    <n-collapse-item title="青铜" name="1">
                    <div>可以</div>
                    </n-collapse-item>
                    <n-collapse-item title="白银" name="2">
                    <div>很好</div>
                    </n-collapse-item>
                    <n-collapse-item title="黄金" name="3">
                    <div>真棒</div>
                    </n-collapse-item>
                </n-collapse>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>

const form = reactive({
    select:"",
    input3:['g']
})

function handleClose(item:any){
    
}

function handleBack() {
    console.log("back");
}

</script>
<style lang="scss" scoped>
.custom_input_group{
    ::v-deep .el-input-group__prepend{
        padding: 0 10px !important;
    }
    ::v-deep .el-input-group__append{
        padding: 0 10px !important;
    }
}
.custom_select{
    ::v-deep .el-select__wrapper{
        box-shadow: none !important;
    }
}
</style>